實作餐廳網站 FAQ 頁面

這次主要運用少量的 JavaScript 操控 DOM 元素並搭配預先設置好的 class 來實作

成品 DEMO

每個問題都有一個 data-id 的自定義 attribute 之後用來選取使用

  <div class="group" data-id="0">
    <div class="question">
      <div>Q1:</div>
      <div class="question__text">請問團體用餐可以併桌嗎？</div>
    </div>
  </div>

用 JavaScript 去監聽點擊事件，點到的時候我們把 target 設為最靠近的 group 的 data-id，用這個 data-id 去讓對應的 answer 來 toggle（若有則變無，若無則變有）一個叫做 hide 的 class

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const questions = document.querySelector(".questions");
    questions.addEventListener("click", function (e) {
      let target = e.target.closest(".group").getAttribute("data-id");
      document
        .querySelectorAll(".answer")
        [target].classList.toggle("hide");
    });
  });
</script>

而這個 .hide 的 class 其實就只是改變 display 變成 none 而已，這樣就完成了點擊顯示或隱藏的功能啦！

  .hide {
    display: none;
  }